<script setup lang="ts">
import { computed } from "vue";

interface Props {
   sortField: string | null;
}

interface Emits {
   (e: "update:sortField", sortField: string | null): void;
}

const props = defineProps<Props>();

const emits = defineEmits<Emits>();

const isDefault = computed(() => props.sortField === null);

const isCreateTime = computed(() => props.sortField === "createTime");

const isPraiseCount = computed(() => props.sortField === "praiseCount");

const changeSortField = (event) => {
   const { sortfield: sortField } = event.target.dataset;
   const clickDom = event.target.nodeName;
   if (clickDom === "A") {
      if (sortField === undefined) {
         emits("update:sortField", null);
      } else {
         emits("update:sortField", sortField);
      }
   }
};

</script>

<template>
   <div class="sort" @click="changeSortField">
      <span>排序:</span>
      <a :class="{active:isDefault}" :data-SortField="null">默认</a>
      <a :class="{active:isCreateTime}" data-SortField="createTime">最新</a>
      <a :class="{active:isPraiseCount}" data-SortField="praiseCount">最热</a>
   </div>
</template>

<style scoped lang="less">
.sort {
   height: 60px;
   line-height: 60px;
   border-top: 1px solid #f5f5f5;
   border-bottom: 1px solid #f5f5f5;
   margin: 0 20px;
   color: #666;

   > span {
      margin-left: 20px;
   }

   > a {
      margin-left: 30px;

      &.active, &:hover {
         color: @xtxColor;
      }

   }

}
</style>
